<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="Application">
    <div @click="click">单击事件</div>
    <div @dblclick="dblclick">双击事件</div>
    <label>
      <input type="text" @focus="focus" @blur="blur" @change="change" @select="select" />
    </label>
    <div @mousedown="mousedown">鼠标按下</div>
    <div @mouseup="mouseup">鼠标抬起</div>
    <div @mousemove="mousemove">鼠标移动</div>
    <div @mouseout="mouseout" @mouseover="mouseover">鼠标移入移出</div>
    <label>
      <input type="text" @keydown="keydown" @keyup="keyup" />
    </label>
  </div>

  <script>
    const { createApp, ref } = Vue;
    let config = {
      setup() {
        const click = () => {
          console.log("单击事件");
        };
        const dblclick = () => {
          console.log("双击事件");
        };
        const focus = () => {
          console.log("获得焦点");
        };
        const blur = () => {
          console.log("失去焦点");
        };
        const change = () => {
          console.log("文本内容改变");
        };
        const select = () => {
          console.log("文本被选中");
        };
        const mousedown = () => {
          console.log("鼠标按下");
        };
        const mouseup = () => {
          console.log("鼠标抬起");
        };
        const mousemove = () => {
          console.log("鼠标移动");
        };
        const mouseout = () => {
          console.log("鼠标移出");
        };
        const mouseover = () => {
          console.log("鼠标移入");
        };
        const keydown = () => {
          console.log("按键按下");
        };
        const keyup = (event) => {
          console.log("按键抬起");
          if (event.key === 'Enter') {
            console.log('Enter键被单击')
          }
        };
        return {click, dblclick, focus, blur, change, select, mousedown, mouseup, mousemove, mouseout, mouseover, keydown, keyup};
      },
    };
    createApp(config).mount("#Application");
  </script>
</body>
</html>